<template>
	<view>
		<view class="order-info">
			<view class="order-company">
				<image src="/static/image/netcom.png"></image>
			</view>
			<view class="face-value">
				<text>订单编码：{{orderInfo.id}}</text>
				<text>充值面额：￥{{orderInfo.card_num}}元</text>
				<text>充值号码：{{orderInfo.phone}}</text>
				<text style="margin-bottom: 40rpx;">实际支付：￥{{(orderInfo.actual_amount-couponprice).toFixed(2)}}元</text>
			</view>
		</view>
		<view class="linebgimg">
			<image class="line-img" src="/static/image/lines.png" mode="aspectFill"></image>
		</view>
		<view class="pay-all">
			<view class="pay-content">
				<text class="pay-title">支付方式</text>
				<view class="coupon">
					<view class="order-pay order-pay-hover">
						<image src="/static/image/wechat.png"></image>
						<text>微信</text>
					</view>
				</view>
			</view>
			<view class="pay-content" v-if="coupon.length>0">
				<text class="pay-title">优惠券 (全场通用)</text>
				<view class="coupon">
					<view @click="selectcoupon(index)"  :class="['order-pay',couponhover==index?'order-pay-hover':'' ]" v-for="(item,index) in coupon" :key="index">
						<image :src="couponhover==index?'../../static/image/coupon.png':'../../static/image/coupon_init.png'"></image>
						<text>{{item.amount}}元</text>
					</view>
				</view>
			</view>
			<view class="pays" @click="pay">立即支付</view> 
		</view>
	</view>
</template>

<script>
	/**
	 * 收银台
	 */
	export default {
		data() {
			return {
				rechangeHeight: 1080,
				coupon: [],
				orderInfo:'',
				couponhover:0,//选中优惠券
				paytype:'wxpay',
				couponprice:0,
			}
		},
		onLoad(option) {
			this.orderdatail(option.order_id); 
		},
		methods: {
			//选中优惠券
			selectcoupon(index){
				this.couponhover = index;
				//赋值卡券的面值
				this.couponprice = this.coupon[index].amount;
			},
			//查询订单详情
			orderdatail(order_id){
				this.$HttRequest({
					url: '/index/orderInfo',
					param: {
						id: order_id,
					}
				}, 'POST').then((ret) => {
				console.log(ret) 
					if (ret.status === 10000) {
						this.orderInfo = ret.data.info;
						this.coupon = ret.data.coupon;
						//计算使用卡券后的金额
						if(this.coupon.length>0){
							
							this.selectcoupon(this.couponhover)
						}
						
					} else {
						this.$ShowMsg(ret.message);
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pages/recharge/recharge'
							});
						})
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg);
				});
			},
			
			pay() {
				let _this = this;
				_this.$HttRequest({
					url: '/wxpay/recharge',
					param: {
						id: _this.orderInfo.id,
						coupon_id: this.coupon.length<=0?null: this.coupon[this.couponhover].id,
					}
				}, 'POST',true).then((ret) => {
					console.log(ret);
					if (ret.status === 10000) {
						//发起支付
						uni.requestPayment({
						    provider: this.paytype,
						    orderInfo:	ret.data , //微信、支付宝订单数据
						    success: function (res) {
						        _this.$ShowMsg('支付成功！')
								setTimeout(()=>{
									uni.navigateTo({
										url:'/pages/recharge/recording'
									})
								},2000)
						    },
						    fail: function (err) {
								_this.$ShowMsg('订单未支付！')
								setTimeout(()=>{
									uni.navigateTo({
										url:'/pages/recharge/recording'
									})
								},2000)
						    }
						});
					} else {
						this.$ShowMsg(ret.message);
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg);
				});
			}
		}
	}
</script>


<style lang="scss">
	.linebgimg {
		background-color: #fff;
		.line-img {
			width: 750rpx;
			height: 45rpx;
		}
	}
	.order-info {
		background-color: $uni-color-primary;
		// border-bottom-left-radius: 20rpx;
		// border-bottom-right-radius: 20rpx;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		height: auto;
		flex-direction: column;
		
		.face-value {
			display: flex;
			align-items: left;
			flex-direction: column;

			text {
				margin: 15rpx 0;
			}
		}


		.order-company {
			margin: 25rpx 0;
			width: 300rpx;
			height: 192rpx;
			border-radius: 10rpx;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
				border: 1rpx solid #fff;
				border-radius: 20rpx;
			image {
			border-radius: 20rpx;
				width: 300rpx;
				height: 192rpx;
			}
		}
	}

	.pay-all {

		display: flex;
		flex-direction: column;

		.pays {
			margin: 100rpx auto;
			margin-bottom: 50rpx;
			width: 80%;
			width: 450rpx;
			height: 95rpx;
			background-color: $uni-color-primary;
			font-size: 32rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			border-radius: 30rpx;
			
		}

		.pay-content {
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;

			.pay-title {
				margin-top: 20rpx;
				font-size: 35rpx;
				font-weight: bold;
				margin-left: 18rpx;
			}

			.coupon {
				display: flex;
				width: 98%;

				flex-wrap: wrap;

				.order-pay {
					border-radius: 20rpx;
					width: 210rpx;
					height: 85rpx;
					font-size: 30rpx;

					display: flex;
					justify-content: center;
					align-items: center;
					margin: 15rpx;
					background-color: #E6E6E6;

					color: #515151;

					image {
						width: 50rpx;
						height: 50rpx;
						margin-right: 10rpx;
					}
				}

				.order-pay-hover {
					color: #fff;
					background-color: #3296FA;
				}
			}
		}
	}
</style>
